<template>
  <div class="djradio">
    <div class="djradio-center">
      <!-- 导航 -->
      <div class="nav">
        <div
          class="box"
          v-for="item in djCatelist"
          :key="item.id"
          @click="change(item)"
          :class="[index === item.id ? 'active' : '']"
        >
          <div
            class="img"
            :style="{
              background: `url(${item.picWebUrl})`,
              backgroundPosition: index === item.id ? `-48px 0` : `0 0`
            }"
            :class="[index === item.id ? 'active2' : '']"
          ></div>
          <em>{{ item.name }}</em>
        </div>
      </div>
      <!-- 节目 -->
      <div class="recommend">
        <dj-recommend
          :recommend="recommend"
          v-if="!this.$route.query.id"
        ></dj-recommend>
        <dj-top :djTopList="djTopList" v-if="!this.$route.query.id"></dj-top>
        <router-view />
      </div>
    </div>
    <!-- 底部 -->
    <main-footer></main-footer>
  </div>
</template>

<script>
import {
  getDjCatelist,
  getDjRecommend,
  getDjTopList,
  getCategoryRecommend
} from '@/api/api.js'
import djRecommend from './components/djRecommend.vue'
import DjTop from './components/djTop.vue'
import MainFooter from '../../components/common/mainFooter.vue'
export default {
  components: { djRecommend, DjTop, MainFooter },
  data() {
    return {
      djCatelist: [],
      index: 0,
      // 推荐节目
      recommend: [],
      // 节目排行
      djTopList: []
    }
  },
  created() {
    this.getDjCatelist()
  },
  methods: {
    // 获取电台分类
    async getDjCatelist() {
      const { categories: res } = await getDjCatelist()
      console.log(res)
      this.djCatelist = res
      // 推荐节目
      const { programs: recommend } = await getDjRecommend()

      this.recommend = recommend
      for (let imgs of this.recommend) {
        imgs.coverUrl += '?param=40y40'
      }
      console.log(this.recommend)
      // 节目排行
      const { toplist: toplist } = await getDjTopList(10)
      console.log(toplist)
      this.djTopList = toplist
      for (let imgs2 of this.djTopList) {
        imgs2.program.coverUrl += '?param=40y40'
      }
      // 分类推荐
      const categoryRecommend = await getCategoryRecommend()
      console.log(categoryRecommend)
    },
    change(item) {
      this.index = item.id
      this.$router
        .push({
          path: '/discover/djradio/category',
          query: {
            id: item.id
          }
        })
        .catch((err) => err)
    }
  }
}
</script>

<style lang="scss" scoped>
.active {
  color: #ff3e3e;
  background: url('https://s2.music.126.net/style/web2/img/index_radio/radio_bg.png?d18892ca6994071d88968e9d151b2dcd')
    no-repeat;
  background-position: -70px 0;
}
.active2 {
  background: url();
  background-position: -48px 0;
}
.nav {
  width: 100%;
  height: 194px;
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
}
.djradio-center {
  width: 980px;
  padding: 40px;
  margin: 0 auto;
  background: #fff;
  .box {
    width: 70px;
    height: 70px;

    margin-right: 30px;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: space-around;

    &:hover {
      cursor: pointer;
      background: #f6f7f7;
      background: url('https://s2.music.126.net/style/web2/img/index_radio/radio_bg.png?d18892ca6994071d88968e9d151b2dcd')
        no-repeat;
      background-position: 0 0;
    }
    .img {
      width: 48px;
      height: 48px;
    }
  }
}
.recommend {
  width: 900px;
  margin: 10px auto;
  display: flex;
  justify-content: space-between;
}
</style>
